<template>
  <bs-dialog v-model="visible" :title="title" :width="600">
    <div class="dialog-content">
      <!--表单项-->
      <bs-form :model="formData" :grid="1" :label-width="90">
        <bs-form-item label="实例">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <bs-form-item label="类型">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <bs-form-item label="监控项">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <bs-form-item label="过期时间">
          <div class="flex-wrap">
            <bs-select class="input" v-model="formData.aa">
              <bs-option v-for="(item, index) in timeRangeOpts" :value="item.value" :key="index" :label="item.label"></bs-option>
            </bs-select>
            <div class="input">
              <el-date-picker v-model="formData.b"></el-date-picker>
            </div>
          </div>
        </bs-form-item>
        <bs-form-item label="备注">
          <bs-input v-model="formData.a" type="textarea"></bs-input>
        </bs-form-item>
      </bs-form>
    </div>
  </bs-dialog>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const title = '静默屏蔽'
const visible = ref()
const formData = ref<Record<string, any>>({})
const info = ref()
const timeRangeOpts = [{
  label: '永久',
  value: '1'
}, {
  label: '2小时',
  value: '2h'
}, {
  label: '4小时',
  value: '4h'
}, {
  label: '3天',
  value: '3d'
}, {
  label: '7天',
  value: '7d'
}, {
  label: '30天',
  value: '30d'
}, {
  label: '自定义',
  value: '11'
}]

const open = (item: any) => {
  visible.value = true
  info.value = item
}

defineExpose({
  open
})

</script>
<style lang="scss" scoped>
.content-text {
  line-height: 1.5;
}
.flex-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .input {
    width: calc(50% - 8px);
  }
}
</style>